<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dojox.grid.Grid in Layout Demo</title>
	
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/themes/tundra/tundra.css";
		@import "../resources/Grid.css";
		@import "../resources/tundraGrid.css";
		@import "../../../dijit/tests/css/dijitTests.css";

		html, body{	
			width: 100%;	/* make the body expand to fill the visible window */
			height: 100%;
			padding: 0 0 0 0;
			margin: 0 0 0 0;
			overflow: hidden;
		}
		.dijitSplitPane{
			margin: 5px;
		}
		
		/* make grid containers overflow hidden */
		body .dijitContentPane {
			overflow: hidden;
		}
		#rightPane {
			margin: 0;
		}
	</style>

	<script type="text/javascript" src="../../../dojo/dojo.js"
		data-dojo-config="parseOnLoad: true, isDebug: false"></script>

	<script type="text/javascript">
		dojo.require("dijit.dijit");
		dojo.require("dijit.layout.LayoutContainer");
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.layout.LinkPane");
		dojo.require("dijit.layout.SplitContainer");
		dojo.require("dijit.layout.TabContainer");
		
		dojo.require("dojox.grid.DataGrid");
		dojo.require("dojo.data.ItemFileWriteStore");
		
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
	</script>
	<script type="text/javascript" src="support/test_data.js"></script>
	<script type="text/javascript">
		var layout = [[
			{name: 'Column 1', field: 'col1'},
			{name: 'Column 2', field: 'col2'},
			{name: 'Column 3', field: 'col3'},
			{name: 'Column 4', field: 'col4', width: "150px"},
			{name: 'Column 5', field: 'col5'}
		],[
			{name: 'Column 6', field: 'col6'},
			{name: 'Column 7', field: 'col7'},
			{name: 'Column 8'},
			{name: 'Column 9', field: 'col3', colSpan: 2}
		]];
		var layout2 = [
			{name: 'Alpha', field: 'col1'},
			{name: 'Beta', field: 'col2'},
			{name: 'Gamma', field: 'col3'},
			{name: 'Delta', field: 'col4', width: "150px"},
			{name: 'Epsilon', field: 'col5'},
			{name: 'Nexilon', field: 'col6'},
			{name: 'Zeta', field: 'col7'},
			{name: 'Eta', field: 'col1'},
			{name: 'Omega', field: 'col8'}
		];
		//
		dojo.addOnLoad(function(){
			dijit.byId("grid3").update();
		});
	</script>
</head>
<body class="tundra">
	<div id="outer" dojoType="dijit.layout.LayoutContainer"
		style="width: 100%; height: 100%;">
		<div id="topBar" dojoType="dijit.layout.ContentPane" layoutAlign="top"
			style="background-color: #274383; color: white;">
			top bar
		</div>
		<div id="bottomBar" dojoType="dijit.layout.ContentPane" layoutAlign="bottom"
			style="background-color: #274383; color: white;">
			bottom bar
		</div>
		<div id="horizontalSplit" dojoType="dijit.layout.SplitContainer"
			orientation="horizontal"
			sizerWidth="5"
			activeSizing="false"
			layoutAlign="client"
		>
			<div id="leftPane" dojoType="dijit.layout.ContentPane"
				 sizeMin="20" sizeShare="20">
				Left side
			</div>

			<div id="rightPane"
				dojoType="dijit.layout.SplitContainer"
				orientation="vertical"
				sizerWidth="5"
				activeSizing="false"
				sizeMin="50" sizeShare="80"
			>
				<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" sizeMin="20" sizeShare="70">
					<div id="grid1" dojoType="dojox.grid.DataGrid" store="test_store" structure="layout" title="Tab 1"></div>
					<div id="grid2" dojoType="dojox.grid.DataGrid" store="test_store" structure="layout2" title="Tab 2"></div>
				</div>
				<div id="bottomRight" dojoType="dijit.layout.ContentPane" sizeMin="20" sizeShare="30">
					<div id="grid3" dojoType="dojox.grid.DataGrid" store="test_store" structure="layout2"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
